<template>
  <div>
    <md-field >
      <md-skeleton title :loading="!userInfo" :row="8">
        <md-field>
          <p style="text-align:center; margin-top:40px;">
            <img src="../assets/logo.png" style="width:76px; "/>
            <span style="display:block; font-size:20px;">欢迎：<template v-if="userInfo">{{userInfo.nickname}}</template></span>
          </p>
        </md-field>
        <md-field>
          <md-field-item></md-field-item>
          <md-button type="primary" @click="onGotoProfile" >我&nbsp;的</md-button>
          <md-field-item></md-field-item>
          <md-button type="primary" @click="onSubmitLogout" >退&nbsp;出</md-button>
        </md-field>
      </md-skeleton>
    </md-field>
  </div>
</template>

<script>
/*
 * mand-mobile 使用说明：
 * https://didi.github.io/mand-mobile/#/zh-CN/home
 */
import { mapGetters } from "vuex"
import { Field, CellItem, Skeleton, Button, FieldItem } from 'mand-mobile'
import { toLogin } from "@libs/login.js"

export default {
  name: "Home",
  components: {
    [Field.name]: Field,
    [CellItem.name]: CellItem,
    [Skeleton.name]: Skeleton,
    [Button.name]: Button,
    [FieldItem.name]: FieldItem
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'token'])
  },
  created () {
    console.log('Home.vue token=' + this.token)
    if (!this.token) {
      toLogin()
    } else {
      if (!this.userInfo) {
        this.$store.dispatch("USERINFO")
      }
    }
  },
  mounted () {
  },
  methods: {
    onSubmitLogout () {
      this.$router.push({ path: '/logout' })
    },
    onGotoProfile () {
      this.$router.push({ path: '/profile' })
    }
  }
}
</script>
